<template>
  <el-upload class="upload-demo" :before-upload="beforeAvatarUpload" drag multiple>
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      支持拖拽 或<em>选择上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        <!-- jpg/png 文件 -->
        图片格式：JPEG、JPG、PNG、BMP、GIF。 图片大小：小于3MB。 图片分辨率：大于15×15，小于4096×4096。
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { compressImage } from '@/utils/compress.js'
import { ElMessage } from 'element-plus'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const beforeAvatarUpload = (rawFile: { size: number }) => {
  console.log(rawFile)
  // 校验大小数量
  // var file = document.querySelector('input').files[0]
  // if (this.fileList.length >= 3) {
  //    Message.success({ content: `最多可上传3张` })
  //    return
  // }
  if (rawFile.size >= 1024 * 1024 * 2 || true) {
    ElMessage({
      message: (`照片大于2MB,平台将自动压缩`),
      type: 'warning'
    })

    // 压缩
    /**
    * @param { * } file input选择后返回的file对象
    */
    compressImage(rawFile).then((result) => {
      // result.compressFile 压缩后新的file对象
      // let formData = new FormData()
      // formData.set('file', result.compressFile)
      // console.log("*********")
      // console.log(formData)
      console.log()
      var reader = new FileReader();
      reader.readAsDataURL(result.compressFile);
      reader.onload = function () {
        console.log('图片', reader.result); //获取到base64格式图片
      }

    })

  }

}

</script>
